<template>
  <view class="content">
    <view class="title">
      <image :src="usericon" mode="" v-if="userInfo"></image>
      <image src="../../static/images/fish.png" mode="" v-else></image>

      <text v-if="userInfo">{{userInfo.name }}</text>
      <text v-else>用户未登录</text>
    </view>

    <view class="input">
      <view class="item">
        <image src="../../static/my.png" mode=""></image>
        <text>个人信息</text>
        <image src="../../static/more.png" mode=""></image>
      </view>
      <view class="item">
        <image src="../../static/news.png" mode=""></image>
        <text>订单列表</text>
        <image src="../../static/more.png" mode=""></image>
      </view>
      <view class="item">
        <image src="../../static/leaveword.png" mode=""></image>
        <text>修改密码</text>
        <image src="../../static/more.png" mode=""></image>
      </view>
      <view class="item">
        <image src="../../static/classmate.png" mode=""></image>
        <text>意见反馈</text>
        <image src="../../static/more.png" mode=""></image>
      </view>
    </view>
    <button type="primary" @click="quit" v-if="userInfo">退出</button>
    <button type="primary" @click="quit" v-else>去登录</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        userInfo: {
          name: '周思怡',
          userid: '01'
        },
        usericon: ''
      }
    },
    methods: {
      quit() {
        uni.clearStorage()
        uni.navigateTo({
          url: './login'
        })
      }
    },
    onShow() {
      let userinfo = uni.getStorageSync('userinfo')
      // console.log(userinfo);
      this.userInfo = userinfo
      if (userinfo) {
        this.usericon = '/static/images/fish.png'
      } else {
        this.usericon = ''
      }
    }
  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .title {
    display: flex;
    align-items: center;
    margin-top: 70rpx;
    position: relative;
    right: 90px;
  }

  .title image {
    padding-left: 30px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-bottom: 80rpx;
    margin-right: 60rpx;
  }

  .title text {
    position: relative;
    bottom: 40rpx;
    color: darkgrey;
  }

  .input {
    width: 90%;
    border-top: #C8C7CC solid 1rpx;
  }

  .input .item {
    display: flex;
    height: 80rpx;
    justify-content: space-between;
    align-items: center;
    border-bottom: #C8C7CC solid 1rpx
  }

  .input .item image {
    width: 40rpx;
    height: 40rpx;
    margin-right: 25rpx;
  }

  .input .item text {
    position: relative;
    right: 200rpx;
    color: #939396;
  }

  button {
    margin-top: 70rpx;
    width: 90%;
  }
</style>